<template>
  <div class="page-wrap"> 
    <div class="page-wrap-content pt-24" v-if="isShow"> 
      <div class="page-wrap-searchbox flex-row mb-12">
        <div class="page-wrap-searchboxinput">
          <pk-input placeholder="请输入岗位名称" v-model="keyword" :prefix-icon="Search" size="large" :circle="true" @change="onChange"></pk-input>
        </div>
        <div class="page-wrap-searchboxadd ml-12"> 
          <pk-button type="default" size="large" :icon="Plus" round @click="setJob">岗位</pk-button>
        </div>
      </div>
      <div class="page-wrap-itembox">
        <div class="page-wrap-item" v-for="(item , index) in messageList" :key="index">
          <good-item :data="item" @onCall="onCall(item)" @onEdit="onEdit"></good-item>
        </div>
      </div>
      <pk-empty desc="添加岗位，开启你的AI面试官" v-if="!loading && messageList.length < 1"></pk-empty>
      <div class="page-wrap-footer">
        <pk-page :total="total" @onSize="onSize" :pageSize="12"></pk-page>
      </div>
    </div>
    <pk-wxtip @onClose="isWxtip=false" v-if="isWxtip"/>
    <drawer-component :curItem="curData" v-if="isDrawer" @onClose="isDrawer=false" @onDrawer="onDrawer" @onEdit="handleEdit"></drawer-component>
  </div>
</template>

<script setup>
  import { ref, onMounted } from 'vue'
  // import pkHeader from '@/components/header/header.vue'
  import pkPage from '@/components/pkui/pkpage/pkpage.vue'
  import pkInput from '@/components/pkui/pkinput/pkinput.vue'
  import pkButton from '@/components/pkui/pkbutton/pkbutton.vue'
  import pkWxtip from '@/components/pkui/pkwxtip/pkwxtip.vue'
  import goodItem from './component/item.vue'
  import { Search, Plus } from '@element-plus/icons-vue'
  import pkEmpty from '@/components/pkui/pkempty/pkempty.vue'
  import drawerComponent from './component/drawer.vue'
  import { jobGetPageList } from '@/api/api'
  import { qffn } from '@/utils/utils'
  import { useRouter } from 'vue-router'
  const isWxtip = ref(false)
  const isShow = ref(false)
  const page = ref(1)
  const loading = ref(false)
  const isDrawer = ref(false)
  const total = ref(0)
  const keyword = ref("")
  const curData = ref(null)
  const router = useRouter()
  const messageList = ref([])

  const setJob = () => {
    router.push({
      path: '/createJob'
    })
  }
  const getInit = () => {
    loading.value = true
    jobGetPageList({
      page: page.value,
      keyword: keyword.value
    }).then(res => {
      isShow.value = true
      console.log('----------------getInit------', res)
      messageList.value = res.data.list.map(item => {
        return {
          ...item,
          invites: qffn(item.invites),
          interviews: qffn(item.interviews)
        }
      })
      loading.value = false
      total.value = res.data.total
    }).catch((err) => {
      if (err.code && err.code == 9101) {
        isWxtip.value = true
      }
      loading.value = false
    })
  }


  const onChange = () => {
    page.value = 1
    getInit()
  }

  const onDrawer = () => {
    isDrawer.value = false
    onChange()
  }

  const onEdit = (e) => {
    router.push({
      path: '/createJob',
      query: {
        id: e.job_id
      }
    })
  }

  const onSize = (e) => {
    page.value = e
    getInit()
  }

  onMounted(() => {
    getInit()
  })
</script>

<style lang="scss" scoped>
  .page-wrap{
    padding-top: 52px;
    overflow: auto;
    &-content{
      margin: 0 auto;
      min-height: 100%;
      width: 996px;
    }
    &-item{
      width: 240px;
      margin-right: 12px;
      margin-bottom: 12px;
    }
    &-item:nth-child(4n){
      margin-right: 0px!important;
    }
    &-searchboxinput{
      width: 240px;
    }
    &-itembox{
      display:flex;
      flex-direction: row;
      flex-wrap: wrap;
    } 
    &-footer{
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 40px;
      padding-bottom: 40px;
    }
  }
</style>